<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Google Cloud DataLab</title>
  <link rel="shortcut icon" type="image/x-icon" href="<%baseUrl%>static/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="<%baseUrl%>static/components/codemirror/lib/codemirror.css" />
  <link rel="stylesheet" href="<%baseUrl%>static/style/style.min.css" type="text/css" />
  <link rel="stylesheet" href="<%baseUrl%>static/fonts/fonts.css" type="text/css" />
  <link rel="stylesheet" href="<%baseUrl%>static/style/datalab.css" type="text/css" />
  <link rel="stylesheet" id="themeStylesheet" href="<%baseUrl%>static/style/custom.css" type="text/css" />

  <script src="<%baseUrl%>static/components/jquery/jquery.min.js"></script>
</head>
<body class="notebook_list"
  data-base-url="<%baseUrl%>"
  data-notebook-path="<%notebookPath%>"
  data-terminals-available="False"
  data-feedback-id="<%feedbackId%>"
  data-version-id="<%versionId%>"
  data-signed-in="<%isSignedIn%>"
  data-user-id="<%userId%>"
  data-account="<%account%>"
  data-reporting-enabled="<%reportingEnabled%>"
  data-project-hash="<%projectHash%>">

  <script>
     window.datalab = {};
  </script>
  <script src="<%configUrl%>"></script>
  <script>
    var reportingEnabled = (document.body.getAttribute('data-reporting-enabled') == 'true');
    if (reportingEnabled) {
      // Snippet to initialize the Google Tag Manager, which provides anonymized usage reporting
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer',window.datalab.gtmAccount);
      // End Google Tag Manager

      var signedIn = (document.body.getAttribute('data-signed-in') == 'true');
      var projectHash = document.body.getAttribute('data-project-hash');
      var event = {
        'event': 'concordEvent',
        'pagePath': '<%baseUrl%>virtual/datalab/openDirectory',
        'eventType': 'datalab',
        'eventName': 'openDirectory',
        'projectNumber': projectHash,
        'metadata': 'signedIn=' + signedIn,
      }
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push(event);
    }
  </script>

  <div id="app">
    <div id="appBar">
    </div>
    <div id="site">
    <div id="appContent">
      <div id="mainArea">
        <div id="mainContent" class="container treeMainContent">
          <div id="ipython-main-app">
            <div id="updateMessageArea">
            </div>
            <div id="tab_content" class="tabbable">
              <div class="tab-content">
                <div id="notebooks" class="tab-pane active">
                  <div id="notebook_toolbar" class="row">
                    <form id="alternate_upload"  class="alternate_upload">
                      <div class="btn-toolbar pull-left">
                        <div class="btn-group">
                          <button id="addNotebookButton" type="button" class="toolbar-btn" title="Add a new notebook">
                            <i class="material-icons">add_box</i> Notebook
                          </button>
                          <button id="addFolderButton" type="button" class="toolbar-btn" title="Add a new folder">
                            <i class="material-icons">add_box</i> Folder
                          </button>
                          <button id="addTerminalButton" type="button" class="toolbar-btn" title="Add a new terminal"
                              style="display:none;">
                            <i class="material-icons">add_box</i> Terminal
                          </button>
                          <label id="uploadButton" class="toolbar-btn" title="Upload notebook(s)">
                            <i class="material-icons">file_upload</i>
                            <input type="file" name="datafile" class="fileinput" multiple="multiple" value="Upload" style="cursor: pointer" />
                            Upload
                          </label>
                          <button id="duplicateButton" type="button" class="toolbar-btn duplicate-button" title="Create a copy of the selected item(s)">
                            <i class="material-icons">content_copy</i> Copy
                          </button>
                          <button id="renameButton" type="button" class="toolbar-btn rename-button" title="Rename selected item(s)">
                            <i class="material-icons">border_color</i> Rename
                          </button>
                          <button id="deleteButton" type="button" class="toolbar-btn delete-button" title="Deleted selected item(s)">
                            <i class="material-icons">clear</i> Delete
                          </button>
                          <button id="editorButton" type="button" class="toolbar-btn editor-button" title="Open selected file in editor">
                            <i class="material-icons">format_align_left</i> Open as Text
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div id="notebook_list">
                    <div id="notebook_list_header" class="row list_header">
                      <div class="btn-group dropdown" id="tree-selector">
                        <button title="Select All / None" type="button" class="btn btn-default btn-xs" id="button-select-all">
                          <input type="checkbox" class="pull-left tree-selector" id="select-all">
                        </button>
                      </div>
                      <div id="project_name">
                        <ul class="breadcrumb">
                          <li>
                            <a href="<%baseUrl%>tree">
                              <i class="material-icons">home</i>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div id="find-file-container" class="btn-group pull-right">
                        <input id="tree-filter" class="form-control" placeholder="Jump to file" />
                        <div class="tree-filter-complete"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
  <script src="<%baseUrl%>static/components/es6-promise/promise.min.js"></script>
  <script src="<%baseUrl%>static/components/requirejs/require.js"></script>
  <script>
    requirejs.config({
      baseUrl: '<%baseUrl%>static/',
    });
    requirejs.config({
      map: {
        '*': {
          'contents': 'services/contents',
        }
      },
      paths: {
        'jquery-ui': 'components/jquery-ui/ui/minified/jquery-ui.min',
      },
    });
    $("#appBar").load("<%baseUrl%>static/appbar.html", function() {
        requirejs(['websocket'], (websocket) => {
            requirejs(['tree/js/main.min']);
        });
    });
  </script>
  <script src="//www.gstatic.com/feedback/api.js" async="true" defer="true"></script>
</body>
</html>
